import React, { Component } from 'react'
import Header from './layout/header'
import Sider from './layout/sider'
import Content from './layout/content'
import Home from '@pages/home/index'
import { tabs } from '@router/config'
import { getUserbtn } from '@net/user/index'
import { mediator } from '@comm/mediator'
import "./index.scss"
import { Layout, Tabs, message } from 'antd'

const { TabPane } = Tabs
interface IProps {
    history?: any
}
interface IStates {
    activityKey: string,
    panes: any[],
    // component:Element
}
export default class App extends Component<IProps, IStates>{
    constructor(props: IProps) {
        super(props)
        this.state = {
            panes: [{ value: "首页", comCode: "home", component: Home, closable: false }],/***/
            activityKey: "home",
        }
    }
    public componentDidMount() {
        this.createTab()
        const user = JSON.parse(sessionStorage.getItem("user") as any)
        if (user !== null) {
            getUserbtn(user[0].role).then((res: any) => {
                mediator.register("getUserBtn", res.data.data)
            })
        } else {
            message.warn("请重新登陆！")
            this.props.history.push("/login.html")
        }
    }
    // 创建tab
    public createTab = () => {
        mediator.on("createTab", (tab: any) => {
            const isCreate: boolean = this.state.panes.find((item: any) => item.comCode === tab.comCode)
            if (!isCreate) {
                tab.component = tabs[tab.comCode] !== undefined ? tabs[tab.comCode].component : tabs["notfound"].component
                const { panes } = this.state;
                const activeKey = tab.comCode;
                const newPanes = [...panes];
                newPanes.push(tab);
                this.setState({
                    panes: newPanes,
                    activityKey: activeKey,
                });
            } else if (isCreate) {
                if (tab.comCode === 'goodDetail') {
                    tab.component = tabs[tab.comCode] !== undefined ? tabs[tab.comCode].component : tabs["notfound"].component
                    const i = this.state.panes.findIndex((item: any) => item.comCode === tab.comCode)
                    let tabList = this.state.panes
                    tabList[i] = tab
                    this.setState({ panes: tabList })
                }
                this.setState({ activityKey: tab.comCode })
                console.warn("当前页已打开")
            }
        })
    }
    public onChange = (activeKey: string) => {
        this.setState({ activityKey: activeKey });
        mediator.emit("openKey", activeKey)
    }
    public onEdit = (targetKey: any, action: any) => {
        (this as any)[action](targetKey)
    }
    // 移除tabs
    public remove = (targetKey: string) => {
        const { panes, activityKey } = this.state;
        let newActiveKey = activityKey;
        let lastIndex: number = 0;
        panes.forEach((pane, i) => {
            if (pane.comCode === targetKey) {
                lastIndex = i - 1;
            }
        });
        const newPanes = panes.filter(pane => pane.comCode !== targetKey);
        if (newPanes.length && newActiveKey === targetKey) {
            if (lastIndex >= 0) {
                newActiveKey = newPanes[lastIndex].comCode;
            } else {
                newActiveKey = newPanes[0].comCode;
            }
        }
        this.setState({
            panes: newPanes,
            activityKey: newActiveKey,
        }, () => { mediator.emit("openKey", this.state.activityKey) });
    }
    public render() {
        const { panes, activityKey } = this.state
        return (
            <Layout>
                <Header></Header>
                <Layout>
                    <Sider></Sider>
                    <Content>
                        <Tabs
                            hideAdd
                            type="editable-card"
                            onChange={this.onChange}
                            activeKey={activityKey}
                            onEdit={this.onEdit}
                            style={{ border: "5px solid sliver" }}
                            tabBarStyle={{ backgroundColor: "white", position: "fixed", zIndex: 1, width: "100%" }}
                        >
                            {
                                panes.map((tab: any, index: number) => {
                                    return (
                                        <TabPane style={{ marginTop: "40px" }} tab={tab.value} key={tab.comCode} closable={tab.closable}>
                                            {<tab.component code={tab.code} />}
                                        </TabPane>
                                    )
                                })
                            }
                        </Tabs>

                    </Content>
                </Layout>
            </Layout>
        )
    }
}